建立一個比較複雜的 .jsx，讓後面使用這個範本進行作業。這邊嘗試用 .jsx 進行副檔名，非原先的.js。

建立 .jsx

建立一個 ChangeStr.jsx，裡面包含一個 input 元件，還有一個按鈕，並且定義兩個參數，分別是取值的 tmpWord 和用來顯示結果的 resultWord，

function ChangeStr() {

  let [tempWord, setWord] =useState(0);
  let [resultWord, setResultWord] =useState(0);

  return (
    <div>
      <h1>Change the words</h1>
      <div>
        <input itemType="text" placeholder="input" id="words"></input>
      </div>
      <div id="result">{tempWord}</div>
      <div>
        <button
          onClick={() => {
            setWord("test");
          }}
        >
          按我
        </button>
      </div>
    </div>
  );
}

後記

嘗試製作互動的元件，但是建立失敗，本日先製做要用的元件，明天再繼續學習！